<template>
	<view  class="e-flex i-image-nav" :style="[bodyStyle]">
		<view class="item" :class="[itemClass]" :style="[itemStyle]" v-show="item.show"
			v-for="(item,index) in option.list" :key="index" @tap="jumpLink(item.link)">
			<load-image mode="aspectFill" :size="['100%','226rpx']" :src="item.url"></load-image>
			<view class="text-box" :style="[{ backgroundColor: item.backgroundColor }]">
				<view class="item-title text-center  e-line-1 ">
					<text class="fw-500 e-font-30" :style="[{ color: item.titleTextColor }]">{{ item.titleText }}</text>
				</view>
				<view class="text-center  e-line-1">
					<text class="e-font-24" :style="[{ color: item.subTitleTextColor }]">{{ item.subTitleText }}</text>
				</view>
			</view>
		</view>



	</view>
</template>

<script lang="ts" setup>
	import { computed } from 'vue'
	import { useLayoutCompoments } from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import type { pageLink } from './type'
	import { px2rpx } from './utils'

	type ImgNavItem = {
		url : string
		titleText : string
		titleTextColor : string
		subTitleText : string
		subTitleTextColor : string
		link : pageLink,
		backgroundColor : string
		show : boolean,
	}

	const props = withDefaults(defineProps<{
		option : {
			list : ImgNavItem[]
			styleType : 0 | 1 | 2
			backgroundType : 1 | 2
			backgroundColor : 'rgba(245, 246, 249, 1)'
			backgroundImage : string,
			paddingTop : number
			paddingBottom : number
			paddingX : number
			radiusTop : number
			radiusBottom : number
		}
	}>(), {
		option: () => ({
			list: [],
			styleType: 0,
			backgroundType: 1,
			backgroundColor: 'rgba(245, 246, 249, 1)',
			backgroundImage: '',
			paddingTop: 10,
			paddingBottom: 10,
			paddingX: 10,
			radiusTop: 0,
			radiusBottom: 0,
		})
	})


	const ctx = useCurrentInstance()

	const { bodyClass: itemClass, bodyBoxStyle: itemStyle, jumpLink } = useLayoutCompoments(ctx, props.option)

	const bodyStyle = computed(() => {
		return {
			background: props.option.backgroundType == 1 ? props.option.backgroundColor : `url(${ctx.$fullLink(props.option.backgroundImage)})`,
			padding: `${px2rpx(props.option.paddingTop)} ${px2rpx(props.option.paddingX)}  ${px2rpx(props.option.paddingBottom)} ${px2rpx(props.option.paddingX)}`
		}
	})
</script>

<style scoped lang="scss">
	.item {
		flex: 0 0 calc(33% - 8rpx);
		margin-right: 12rpx;
		overflow: hidden;

		&:last-child {
			margin-right: 0;
		}

		.text-box {
			height: 122rpx;
			padding: 18rpx 0 26rpx 0;

			.item-title {
				margin-bottom: 12rpx;
				font-size: 30rpx;
			}
		}
	}
</style>